<template>
  <div class="lotteryDesc hideScrollBar" ref="scrollEl">
    <div class="lotteryDesc-bg"></div>
    <!-- 导航 -->
    <NavBar
      :title="t('lotteryMoney.desc_navTitle')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      @thresholdChange="(val) => (pageData.isShowAnchor = val)"
      @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
      isFixed
    />

    <!-- 内容部分 -->
    <div class="content">
      <!-- 定位锚点 tab -->
      <div
        v-if="pageData.isShowAnchor"
        class="anchor items-center scrollable-content"
        style="height: 54px"
        ref="anchorEl"
      >
        <div
          v-for="(item, index) in pageData.refs"
          :key="index"
          class="anchor-item"
          :class="{ 'anchor-activity': pageData.currentIdx === index }"
          :ref="(el) => setRefAction(el, index)"
          @click="anchorJump(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 正文 -->
      <div style="position: relative; padding-top: 20px">
        <!-- 活动愿景 -->
        <div ref="group1"></div>
        <Group
          class="content-group"
          order="1"
          :title="$t('lotteryMoney.desc_title0')"
        >
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title0_text1") }}
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title0_text2") }}
            </div>
          </div>
        </Group>
        <!-- 玩法介绍 -->
        <div ref="group2"></div>
        <Group
          class="content-group"
          order="2"
          :title="$t('lotteryMoney.desc_title1')"
        >
          <!-- 玩法步骤 -->
          <div class="step">
            <div class="step-row1 items-center">
              <div class="step-item items-center">
                <div>{{ $t("lotteryMoney.desc_title1_text11") }}</div>
              </div>
              <img
                class="step-icon"
                src="/image/lotterymoney/jt-right-icon.svg"
              />
              <div class="step-item items-center">
                <div>{{ $t("lotteryMoney.desc_title1_text12") }}</div>
              </div>
            </div>
            <div class="step-row2 items-center">
              <div style="width: 50%"></div>
              <div
                class="items-center"
                style="width: 50%; justify-content: center"
              >
                <img
                  class="step-icon"
                  src="/image/lotterymoney/jt-bottom-icon.svg"
                />
              </div>
            </div>
            <div class="step-row3 items-center">
              <div class="step-item items-center">
                <div>{{ $t("lotteryMoney.desc_title1_text14") }}</div>
              </div>
              <img
                class="step-icon"
                src="/image/lotterymoney/jt-left-icon.svg"
              />
              <div class="step-item items-center">
                <div>{{ $t("lotteryMoney.desc_title1_text13") }}</div>
              </div>
            </div>
          </div>
          <!-- 正文 -->
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title2") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text3") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title4") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text4") }}
              </div>
            </div>
          </div>
          <!-- <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title5") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text5") }}
              </div>
            </div>
          </div> -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title6") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text6") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title7") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text7") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title8") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text8") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title9") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text9") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title10") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text10") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title1_title111") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title1_text111") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 奖金来源 -->
        <div ref="group2_1"></div>
        <Group
          class="content-group"
          order="3"
          :title="$t('lotteryMoney.desc_title2_1')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title2_1_text1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title2_1_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title2_1_text3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title2_1_text4") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title2_1_text5") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title2_1_text6") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 奖金分配 -->
        <div ref="group3"></div>
        <Group
          class="content-group"
          order="4"
          :title="$t('lotteryMoney.desc_title2')"
        >
          <!-- 表格 -->
          <div class="table3">
            <div class="table3-item-header table3-item items-center">
              <span>{{ $t("lotteryMoney.desc_title2_text1") }}</span>
              <span>{{ $t("lotteryMoney.desc_title2_text2") }}</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.desc_title2_text3") }}</span>
              <span>30%</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.desc_title2_text4") }}</span>
              <span>20%</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.desc_title2_text5") }}</span>
              <span>10%</span>
            </div>
            <div class="table3-item items-center">
              <span>{{ $t("lotteryMoney.desc_title2_text6") }}</span>
              <span>40%</span>
            </div>
          </div>
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title2_text7") }}
            </div>
          </div>
          <!-- 举例说明 -->
          <div class="example">
            <span class="example-title">
              {{ $t("lotteryMoney.desc_title2_text8") }}
            </span>
            {{ $t("lotteryMoney.desc_title2_text9") }}
          </div>
        </Group>
        <!-- 活动周期 -->
        <div ref="group4"></div>
        <Group
          class="content-group"
          order="5"
          :title="$t('lotteryMoney.desc_title3')"
        >
          <!-- 表格 -->
          <img
            v-if="globalStore.$state.language == 'indonesia'"
            class="group4logo"
            style="margin-top: 10px"
            src="/image/lotterymoney/desc-tab-icon1.png"
          />
          <img
            v-else-if="globalStore.$state.language == 'mys'"
            class="group4logo"
            style="margin-top: 10px"
            src="/image/lotterymoney/desc-tab-icon2.png"
          />
          <img
            v-else-if="globalStore.$state.language == 'pt'"
            class="group4logo"
            style="margin-top: 10px"
            src="/image/lotterymoney/desc-tab-icon3.png"
          />
          <img
            v-else-if="globalStore.$state.language == 'VI'"
            class="group4logo"
            style="margin-top: 10px"
            src="/image/lotterymoney/desc-tab-icon4.png"
          />
          <img
            v-else
            class="group4logo"
            style="margin-top: 10px"
            src="/image/lotterymoney/desc-tab-icon0.png"
          />
          <!-- 正文 -->
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title3_title1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title3_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title3_title2") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title3_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title3_title3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title3_text3") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 大赢家中奖规则 -->
        <div ref="group5"></div>
        <Group
          class="content-group"
          order="6"
          :title="$t('lotteryMoney.desc_title4')"
        >
          <!-- 表格 -->
          <div class="group5" v-if="false">
            <div class="group5-top items-center">
              <span style="color: #007bff">
                {{ $t("lotteryMoney.zhywjyzhs") }}</span
              >
              <span style="color: #ffb800"> {{ $t("lotteryMoney.hxpx") }}</span>
            </div>

            <!-- 提示信息 -->
            <van-popover
              class="group5alert"
              theme="dark"
              placement="bottom-start"
            >
              <div class="group5alert-alert">
                {{ $t("lotteryMoney.xydyj") }},{{
                  $t("lotteryMoney.dyjsqxs")
                    .replace("xx:xx", startUTCFormat)
                    .replace("--:--", endUTCFormat)
                }}
              </div>
              <template #reference>
                <div class="group5-img" style="position: relative">
                  <img
                    class="group5-img"
                    src="/image/lotterymoney/desc-time-icon.png"
                  />
                  <img
                    class="group5alert-img"
                    src="/image/mvp/assetDetails/exclamation.svg"
                  />
                </div>
              </template>
            </van-popover>
          </div>

          <!-- 正文 -->
          <!-- <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title4_title1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title4_text1") }}
              </div>
            </div>
          </div> -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title4_title2") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title4_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title4_title3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title4_text3") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 队伍分红 -->
        <div ref="group6"></div>
        <Group
          class="content-group"
          order="7"
          :title="$t('lotteryMoney.desc_title5')"
        >
          <!-- 正文 -->
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title5_title1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title5_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title5_title2") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title5_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title5_title3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title5_text3") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 奖金发放 -->
        <div ref="group7"></div>
        <Group
          class="content-group"
          order="8"
          :title="$t('lotteryMoney.desc_title6')"
        >
          <!-- 正文 -->
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title1") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title2") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text2") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title3") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text3") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title4") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text4") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title5") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text5") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title6") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text6") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("lotteryMoney.desc_title6_title7") }}
              </div>
              <div class="group-text">
                {{ $t("lotteryMoney.desc_title6_text7") }}
              </div>
            </div>
          </div>
        </Group>
        <!-- 常见问题 -->
        <div ref="group8"></div>
        <Group
          class="content-group"
          order="9"
          :title="$t('lotteryMoney.desc_title7')"
        >
          <!-- 正文 -->
          <div class="group-item" style="margin-top: 15px">
            <div class="items-center" style="margin-bottom: 8px">
              <div class="group8">Q</div>
              <div class="group-title" style="margin-bottom: 0px">
                {{ $t("lotteryMoney.desc_title7_title1") }}
              </div>
            </div>
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title7_text1") }}
            </div>
          </div>
          <div class="group-item">
            <div class="items-center" style="margin-bottom: 8px">
              <div class="group8">Q</div>
              <div class="group-title" style="margin-bottom: 0px">
                {{ $t("lotteryMoney.desc_title7_title2") }}
              </div>
            </div>
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title7_text2") }}
            </div>
          </div>
          <div class="group-item">
            <div class="items-center" style="margin-bottom: 8px">
              <div class="group8">Q</div>
              <div class="group-title" style="margin-bottom: 0px">
                {{ $t("lotteryMoney.desc_title7_title3") }}
              </div>
            </div>
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title7_text3") }}
            </div>
          </div>
          <!-- <div class="group-item">
            <div class="items-center" style="margin-bottom: 8px">
              <div class="group8">Q</div>
              <div class="group-title" style="margin-bottom: 0px">
                {{ $t("lotteryMoney.desc_title7_title4") }}
              </div>
            </div>
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title7_text4") }}
            </div>
          </div> -->
          <div class="group-item">
            <div class="items-center" style="margin-bottom: 8px">
              <div class="group8">Q</div>
              <div class="group-title" style="margin-bottom: 0px">
                {{ $t("lotteryMoney.desc_title7_title5") }}
              </div>
            </div>
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title7_text5") }}
            </div>
          </div>
          <div class="group-item">
            <div class="items-center" style="margin-bottom: 8px">
              <div class="group8">Q</div>
              <div class="group-title" style="margin-bottom: 0px">
                {{ $t("lotteryMoney.desc_title7_title6") }}
              </div>
            </div>
            <div class="group-text">
              {{ $t("lotteryMoney.desc_title7_text6") }}
            </div>
          </div>

          <!-- 授权 -->
          <div class="group9">
            <div class="group9-title">
              {{ $t("lotteryMoney.desc_title7_title7") }}
            </div>
            <div class="group9-text">
              {{ $t("lotteryMoney.desc_title7_text7") }}
            </div>
          </div>
        </Group>
      </div>
    </div>
    <!-- 利用相应式原理，监听多个数值变化 -->
    <div style="position: absolute; bottom: -990px; left: -999px">
      {{ currentIdx }}
    </div>
  </div>
</template>
<script setup name="lotteryDesc">
import { getOssFileUrl } from "@/utils";
import Group from "../../../components/desc/group.vue";
import { useElementBounding } from "@vueuse/core";
import { useGlobalStore } from "~~/store/global";

// definePageMeta({
//   keepalive: true,
// });
const globalStore = useGlobalStore();
const { t } = useI18n();
const imgUrl = getOssFileUrl({
  headerBg: "/image/mvp/coin/bdc-introduced-bg.png",
  fzjl: "/image/mvp/paper-fzjl.png",
});

// 页面属性
const pageData = reactive({
  isShowAnchor: false,
  navBarHeight: 0,
  currentIdx: -1,
  scrollIng: false,
  refs: [],
  anchorRefs: [],
});

// 活动开始时间转换成 GTM+7
let startUTCFormat = computed(() => {
  // if (beginTime && beginTime.value) {
  //   const { time } = formatToTimeZone(
  //     new Date(Number(beginTime.value)),
  //     "UTC",
  //     ""
  //   );
  //   return time.substring(0, 5);
  // }
  return "03:00";
});

let endUTCFormat = computed(() => {
  // if (props && props.lottery.pkEndTime) {
  //   const { time } = formatToTimeZone(
  //     new Date(Number(pkEndTime.value)),
  //     "UTC",
  //     ""
  //   );
  //   return time.substring(0, 5);
  // } else if (firstStageEndTime.value) {
  //   const { time } = formatToTimeZone(
  //     new Date(Number(firstStageEndTime.value)),
  //     "UTC",
  //     ""
  //   );
  //   return time.substring(0, 5);
  // }
  return "15:00";
});

//将循环ref放入到数组中
const setRefAction = (el, item) => {
  pageData.anchorRefs[item] = el;
};

const anchorJump = (idx) => {
  pageData.currentIdx = idx;
  pageData.scrollIng = true;
  let offsetTop = 0;

  if (idx > 0 && pageData.refs[idx].ref.offsetTop) {
    // console.log("--pageData[id]--", pageData.refs[idx].ref);
    offsetTop = pageData.refs[idx].ref.offsetTop - pageData.navBarHeight - 54;
  }
  // console.log(offsetTop, "--id--", idx);
  if (scrollEl.value) {
    scrollEl.value.scrollTo({
      top: offsetTop,
      behavior: "smooth",
    });
  }
  setTimeout(() => {
    pageData.scrollIng = false;
  }, 800);
};

const scrollEl = ref();
const anchorEl = ref();
const group1 = ref();
const group2 = ref();
const group2_1 = ref();
const group3 = ref();
const group4 = ref();
const group5 = ref();
const group6 = ref();
const group7 = ref();
const group8 = ref();

const { y: group1_top } = useElementBounding(group1);
const { y: group2_top } = useElementBounding(group2);
const { y: group2_1_top } = useElementBounding(group2_1);
const { y: group3_top } = useElementBounding(group3);
const { y: group4_top } = useElementBounding(group4);
const { y: group5_top } = useElementBounding(group5);
const { y: group6_top } = useElementBounding(group6);
const { y: group7_top } = useElementBounding(group7);
const { y: group8_top } = useElementBounding(group8);

const currentIdx = computed({
  get() {
    if (pageData.scrollIng) return pageData.currentIdx;
    if (group1_top.value < 64 && group1_top.value > 0) {
      pageData.currentIdx = 0;
    } else if (group2_top.value < 64 && group2_top.value > 0) {
      pageData.currentIdx = 1;
    } else if (group2_1_top.value < 110 && group2_1_top.value > 0) {
      pageData.currentIdx = 2;
    } else if (group3_top.value < 110 && group3_top.value > 0) {
      pageData.currentIdx = 2;
    } else if (group4_top.value < 110 && group4_top.value > 0) {
      pageData.currentIdx = 3;
    } else if (group5_top.value < 110 && group5_top.value > 0) {
      pageData.currentIdx = 4;
    } else if (group6_top.value < 110 && group6_top.value > 0) {
      pageData.currentIdx = 5;
    } else if (group7_top.value < 110 && group7_top.value > 0) {
      pageData.currentIdx = 6;
    } else if (group8_top.value < 110 && group8_top.value > 0) {
      pageData.currentIdx = 7;
    }

    return pageData.currentIdx;
  },

  set(val) {
    pageData.currentIdx = val;
  },
});
watch(
  () => pageData.currentIdx,
  (newVal) => {
    if (newVal > -1 && pageData.anchorRefs[pageData.currentIdx] && anchorEl) {
      let offsetTop = pageData.anchorRefs[pageData.currentIdx].offsetLeft;
      anchorEl.value.scrollTo({
        left: offsetTop - 88,
        behavior: "smooth",
      });
    }
  }
);

onMounted(() => {
  pageData.refs = [
    {
      title: t("lotteryMoney.desc_title0"),
      ref: group1,
    },
    {
      title: t("lotteryMoney.desc_title1"),
      ref: group2,
    },
    {
      title: t("lotteryMoney.desc_title2_1"),
      ref: group2_1,
    },
    {
      title: t("lotteryMoney.desc_title2"),
      ref: group3,
    },
    {
      title: t("lotteryMoney.desc_title3"),
      ref: group4,
    },
    {
      title: t("lotteryMoney.desc_title4"),
      ref: group5,
    },
    {
      title: t("lotteryMoney.desc_title5"),
      ref: group6,
    },
    {
      title: t("lotteryMoney.desc_title6"),
      ref: group7,
    },
    {
      title: t("lotteryMoney.desc_title7"),
      ref: group8,
    },
  ];
});
</script>
<style lang="scss" scoped>
.lotteryDesc {
  position: relative;
  background-color: #f0f3fa;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: var(--safe-area-inset-bottom);

  &-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300 * 2px;
    background: linear-gradient(
      180deg,
      #96c9ff 0.07%,
      rgba(226, 236, 255, 0) 99.93%
    );
  }
}
.anchor {
  position: fixed;
  padding-left: 15 * 2px;
  left: 0;
  background-color: #fff;
  // background: linear-gradient(180deg, #ecf5ff 0%, #f9fcff 100%);
  box-shadow: 0px 2px 8px 0px rgba(21, 81, 145, 0.16);
  z-index: 999;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;

  &-activity {
    padding: 0 12 * 2px;
    border-radius: 28px;
    background: #e1efff;
    color: #007bff;
  }
  &-item {
    font-weight: 590;
    white-space: nowrap;
    margin-right: 24 * 2px;
    font-size: 13 * 2px;
    height: 26 * 2px;
    line-height: 26 * 2px;
    text-align: center;
  }
}

.content {
  position: relative;
  z-index: 2;
  &-group {
    margin: 0 * 2px 15 * 2px 10 * 2px 15 * 2px;
  }
}

.group {
  &-item {
    margin-top: 12 * 2px;
    align-items: flex-start;
  }
  &-title {
    color: #007bff;
    font-size: 13 * 2px;
    font-weight: 590;
    margin-bottom: 5 * 2px;
  }
  &-text {
    color: #141924;
    font-size: 13 * 2px;
    &-icon {
      width: 9 * 2px;
      height: 9 * 2px;
      margin-top: 3 * 2px;
      margin-right: 9 * 2px;
    }
  }
}

.step {
  margin-top: 20 * 2px;

  &-row1 {
    justify-content: space-between;
  }
  &-row2 {
    justify-content: space-between;
    margin: 3 * 2px 0;
  }
  &-row3 {
    justify-content: space-between;
  }

  &-item {
    justify-content: center;
    padding: 12 * 2px 8 * 2px;
    word-break: break-word;
    width: 164 * 2px;
    min-height: 50 * 2px;
    border-radius: 8 * 2px;
    border: 2px solid #007bff;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    text-align: center;
    font-size: 11 * 2px;
    font-weight: 590;
  }
}

.table3 {
  margin-top: 20 * 2px;
  border-radius: 8 * 2px;
  overflow: hidden;
  &-item {
    height: 40 * 2px;
    padding: 10 * 2px;
    justify-content: space-between;
    background-color: #f0f7ff;
    color: #141924;
    font-size: 13 * 2px;
    &-header {
      background: linear-gradient(
        90deg,
        #007bff 0.34%,
        #00b2ff 100%
      ) !important;
      color: #fff !important;
      font-size: 12 * 2px;
      font-weight: 590;
    }
  }
}

.example {
  margin-top: 10 * 2px;
  padding: 10 * 2px;
  border-radius: 8 * 2px;
  background: #f6f8fc;
  line-height: 16 * 2px;
  color: #999da7;
  font-size: 12 * 2px;
  &-title {
    color: #007bff;
  }
}

.group4logo {
  width: 100%;
}

.group5 {
  position: relative;
  margin-top: 20 * 2px;
  font-size: 13 * 2px;
  font-weight: 590;
  &-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
  }
  &-img {
    width: 100%;
  }
}
.group5alert {
  &-img {
    position: absolute;
    left: 28 * 2px;
    bottom: 0px;

    margin-left: 6 * 2px;
    width: 14 * 2px;
    height: 14 * 2px;
  }
  &-alert {
    max-width: 70vw;
    padding: 6 * 2px 12 * 2px;
    color: #fff;
    font-size: 11 * 2px;
  }
}

.group8 {
  // width: 20 * 2px;
  // height: 20 * 2px;
  // line-height: 20 * 2px;
  padding: 3 * 2px 5.4 * 2px;
  text-align: center;
  border-radius: 4 * 2px;
  color: #fff;
  font-size: 13 * 2px;
  font-weight: 590;
  background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
  margin-right: 5 * 2px;
}

.group9 {
  margin-top: 20 * 2px;
  &-title {
    text-align: center;
    padding: 2 * 2px 4 * 2px;
    border-radius: 100px;
    border: 2px solid rgba(115, 119, 128, 0.15);
    background: linear-gradient(90deg, #e5f2ff 0%, #e5fbff 100%);
    margin-bottom: 12 * 2px;
    color: #6697cc;
    font-size: 12 * 2px;
  }
  &-text {
    color: #999da7;
    font-size: 12 * 2px;
  }
}
/* 隐藏滚动条 */
.scrollable-content::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.scrollable-content::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
